<!-- 
Copyright (c) 2021-2024 SigScalr, Inc.

This file is part of SigLens Observability Solution

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

<!DOCTYPE html>
<html lang="en">

<script async src="https://www.googletagmanager.com/gtag/js?id=G-5SBJC04YFB"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-5SBJC04YFB');
</script>

<head>
    <meta charset="UTF-8" />
    <title>SigLens</title>

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png" />
    <link rel="manifest" href="assets/site.webmanifest" />
    <link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#5bbad5" />
    <meta name="msapplication-TileColor" content="#da532c" />
    <link rel="stylesheet" href="./css/lib/gridstack.min.css" />
    <link rel="stylesheet" href="./css/lib/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/lib/all.min.css" />
    <link rel="stylesheet" href="./css/lib/ag-grid.min.css" />
    <link rel="stylesheet" href="./css/lib/jquery-ui.min.css" />
    <link rel="stylesheet" href="./css/lib/jquery.tagsinput.min.css" />
    <link rel="stylesheet" href="./css/lib/jquery-ui.min.css" />
    <link rel="stylesheet" href="./css/lib/tippy.css" />
    <link rel="stylesheet" href="./css/dashboard.css?cb={{ AppVersion }}" />
    <link rel="stylesheet" href="./css/siglens.css?cb={{ AppVersion }}" />
    <link rel="stylesheet" href="./css/query-builder.css?cb={{ AppVersion }}" />
    <link rel="stylesheet" href="./css/metrics-explorer.css?cb={{ AppVersion }}" />
    
    
    <script src="./js/lib/uuidv4.min.js"></script>
    <script src="./js/lib/gridstack.all.js"></script>
    <script src="./js/lib/lodash.min.js"></script>
    <script src="./js/lib/jquery-3.6.0.min.js"></script>
    <script src="./js/lib/jquery-ui.min.js"></script>
    <script src="./js/lib/js.cookie.min.js"></script>
    <script src="./js/lib/moment.min.js"></script>
    <script src="./js/lib/date_fns.min.js"></script>
    <script src="./js/lib/popper.min.js"></script>
    <script src="./js/lib/bootstrap.bundle.min.js"></script>
    <script src="./js/lib/ag-grid-community.min.noStyle.js"></script>
    <script src="./js/lib/tippy-bundle.umd.min.js"></script>
    <script src="./js/lib/echarts.min.js"></script>
    <script src="./js/lib/chart.umd.min.js?cb={{ AppVersion }}"></script>
    <script src="./js/lib/chartjs-adapter-date-fns.bundle.min.js"></script>
    <script>
        var defaultTheme = Cookies.get('theme') || 'light';
        $('html').attr('data-theme', defaultTheme);
    </script>
    {{ .RunCheck1 | safeHTML }}
</head>

<body class="classBody">
    <div id="app-container">
        <div id="app-side-nav">
        </div>
        <div id="new-dashboard">
            <div class="header-container">
                <div id="breadcrumb"></div>
                <div class="btn-container">
                    <div class="dropdown">
                        <button class="btn dropdown-toggle btn-top index-btn-show" type="button" id="date-picker-btn" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" title="Pick the time window">
                            <span>Time Picker</span>
                            <i class="dropdown-arrow"></i>
                        </button>
                        <div class="dropdown-menu daterangepicker" aria-labelledby="index-btn" id="daterangepicker ">
                            <p class="dt-header">Search the last</p>
                            <div class="ranges">
                                <div class="inner-range">
                                    <div id="now-5m" class="db-range-item">5 Mins</div>
                                    <div id="now-3h" class="db-range-item">3 Hrs</div>
                                    <div id="now-2d" class="db-range-item">2 Days</div>
                                </div>
                                <div class="inner-range">
                                    <div id="now-15m" class="db-range-item">15 Mins</div>
                                    <div id="now-6h" class="db-range-item">6 Hrs</div>
                                    <div id="now-7d" class="db-range-item">7 Days</div>
                                </div>
                                <div class="inner-range">
                                    <div id="now-30m" class="db-range-item">30 Mins</div>
                                    <div id="now-12h" class="db-range-item">12 Hrs</div>
                                    <div id="now-30d" class="db-range-item">30 Days</div>
                                </div>
                                <div class="inner-range">
                                    <div id="now-1h" class="db-range-item">1 Hr</div>
                                    <div id="now-24h" class="db-range-item">24 Hrs</div>
                                    <div id="now-90d" class="db-range-item">90 Days</div>
                                </div>
                                <hr>
                                </hr>
                                <div class="dt-header">Custom Search <span id="reset-timepicker" type="reset">Reset</span></div>
                                <div id="daterange-from"> <span id="dt-from-text"> From</span> <br />
                                    <input type="date" id="date-start" />
                                    <input type="time" id="time-start" value="00:00" />
                                </div>
                                <div id="daterange-to"> <span id="dt-to-text"> To </span> <br />
                                    <input type="date" id="date-end">
                                    <input type="time" id="time-end" value="00:00">
                                </div>
                                <div class="drp-buttons">
                                    <button class="applyBtn btn btn-sm btn-primary" id="customrange-btn" type="button">Apply</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn dropdown-dash" id="save-db-btn" title="Save dashboard">
                    </button>
                    <button class="btn settings-btn" title="Dashboard settings" id="db-settings-btn">
                    </button>
                    <div class="refresh-container">
                        <button class="btn refresh-btn" title="Refresh dashboard">
                        </button>
                        <div class="dropdown">
                            <button class="btn dropdown-toggle" type="button" id="refresh-picker-btn"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                data-bs-toggle="dropdown">
                                <span></span>
                                <img class="orange" src="assets/arrow-btn.svg" alt="expand">                
                            </button>
                            <div class="dropdown-menu refresh-picker" aria-labelledby="index-btn" id="refresh-picker ">
                                <div class="ranges">
                                    <div id="0" class="refresh-range-item">Off</div>
                                    <div id="5m" class="refresh-range-item">5m</div>
                                    <div id="30m" class="refresh-range-item">30m</div>
                                    <div id="1h" class="refresh-range-item">1h</div>
                                    <div id="5h" class="refresh-range-item">5h</div>
                                    <div id="1d" class="refresh-range-item">1d</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn" id="add-panel-btn" title="Add panel">
                        <span>
                            <img src="./assets/add-icon.svg" class="add-icon" alt="add icon "/> </span>Add Panel
                    </button>
                </div>
            </div>

            <div class="py-3">
                <div class="d-flex" style="margin: 0px 10px;">
                    <input type="text" class="form-control search-db-input" placeholder="Filter logs panel (e.g., app_version=1.2.* OR http_status=404)" title="Search query" style="background-color: var(--top-bar-bg-color-regular);">
                    <div class="text-end d-flex">
                        <button class="btn run-filter-btn" id="run-dashboard-fliter"></button>
                    </div>
                </div>
                <div id="panel-container" class="grid-stack">
                </div>
            </div>


        </div>
        <div class="popupOverlay">
        </div>
        <div id="panel-del-prompt" class="popupContent">
            <h3 class="header">Confirmation</h3>
            <div class="prompt-text-container">
                <div class="delete-db-text">Are you sure you want to delete this Panel?</div>
            </div>
            <div class="btncontainer">
                <button type="button" id="cancel-btn-panel" class="btn btn-primary">Cancel</button>
                <button type="button" id="delete-btn-panel" class="btn btn-secondary">Delete</button>
            </div>
        </div>
        <div id="app-footer">2024 &copy; SigLens</div>

        <div id="add-widget-options">
            <ul class="editPanelMenu">
                <div class="d-flex justify-content-between w-100 align-items-baseline">
                    <div>
                        <h6 class="widgets-text">Panel Type</h6>
                    </div>
                    <div class="close-widget-popup">×</div>
                </div>
                <div class="editPanelMenu-options widget-option" data-index="0">
                    <img src="./assets/line-chart.svg" alt="line chart icon" class="chart-display" />
                    <li>Line Chart</li>
                </div>
                <div class="editPanelMenu-options widget-option" data-index="1">
                    <img src="./assets/bar-chart.svg" alt="bar chart icon" class="chart-display"/>
                    <li>Bar Chart</li>
                </div>
                <div class="editPanelMenu-options widget-option" data-index="2">
                    <img src="./assets/pie-chart.svg" alt="pie chart icon" class="chart-display"/>
                    <li>Pie Chart</li>
                </div>
                <div class="editPanelMenu-options widget-option" data-index="3">
                    <img src="./assets/data-table.svg" alt="data table icon" class="chart-display"/>
                    <li>Data Table</li>
                </div>
                <div class="editPanelMenu-options widget-option" data-index="4">
                    <img src="./assets/number-chart.svg" alt="number chart icon" class="chart-display" />
                    <li>Number</li>
                </div>
                <div class="editPanelMenu-options widget-option" data-index="5">
                    <img src="./assets/log-lines.svg" alt="log lines icon" class="chart-display" />
                    <li>Log Lines</li>
                </div>
            </ul>
        </div>
    </div>
    <div class="panelEditor-container" style="z-index: 3;">
        <div class="top-buttons">
            <div class="toggle-buttons d-flex">
                <div id="edit-button">Edit</div>
                <div id="overview-button">Overview</div>
            </div>
            <div class="panEdit-btn panEdit-discard" title="Undo all changes">×</div>
        </div>
        <div style="flex-grow:1; overflow-y:auto">
            <div class="panelEditorLeft" id="panel-editor-left">
                <div>
                    <div class="panEdit-navBar">
                        <div>
                            <span class="panEdit-dbName over-title">DBName</span>
                            <span class="over-title"> / </span>
                            <span class="panelTitle over-title">Panel 1</span>
                        </div>
                        <div class="navbar-options">
                            <div class="index-container">
                                <input type="text" name="" id="index-listing">
                                <button id="add-index" class="add-con btn">+</button>
                            </div>
                            <div class="dropdown">
                                <button class="btn dropdown-toggle btn-top" type="button" id="date-picker-btn" data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown"
                                    title="Pick the time window">
                                    <span>Time Picker</span>
                                    <i class="dropdown-arrow"></i>
                                </button>
                                <div class="dropdown-menu daterangepicker" aria-labelledby="index-btn" id="daterangepicker ">
                                    <p class="dt-header">Search the last</p>
                                    <div class="ranges">
                                        <div class="inner-range">
                                            <div id="now-5m" class="db-range-item">5 Mins</div>
                                            <div id="now-3h" class="db-range-item">3 Hrs</div>
                                            <div id="now-2d" class="db-range-item">2 Days</div>
                                        </div>
                                        <div class="inner-range">
                                            <div id="now-15m" class="db-range-item">15 Mins</div>
                                            <div id="now-6h" class="db-range-item">6 Hrs</div>
                                            <div id="now-7d" class="db-range-item">7 Days</div>
                                        </div>
                                        <div class="inner-range">
                                            <div id="now-30m" class="db-range-item">30 Mins</div>
                                            <div id="now-12h" class="db-range-item">12 Hrs</div>
                                            <div id="now-30d" class="db-range-item">30 Days</div>
                                        </div>
                                        <div class="inner-range">
                                            <div id="now-1h" class="db-range-item">1 Hr</div>
                                            <div id="now-24h" class="db-range-item">24 Hrs</div>
                                            <div id="now-90d" class="db-range-item">90 Days</div>
                                        </div>
                                        <hr>
                                        </hr>
                                        <div class="dt-header">Custom Search <span id="reset-timepicker"
                                                type="reset">Reset</span></div>
                                        <div id="daterange-from"> <span id="dt-from-text"> From</span> <br />
                                            <input type="date" id="date-start" />
                                            <input type="time" id="time-start" value="00:00" />
                                        </div>
                                        <div id="daterange-to"> <span id="dt-to-text"> To </span> <br />
                                            <input type="date" id="date-end">
                                            <input type="time" id="time-end" value="00:00">
                                        </div>
                                        <div class="drp-buttons">
                                            <button class="applyBtn btn btn-sm btn-primary" id="customrange-btn"
                                                type="button">Apply</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="dropdown" id="avail-field-container">
                                <button class="btn dropdown-toggle avail-fields-btn btn btn-grey" title="Select field names to display" type="button"
                                    id="avail-fields-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                    data-bs-toggle="dropdown">
                                    <i class="fa-solid fa-list-check" title="Select field names to display"></i>&nbsp;
                                    Available Fields
                                    <i class="dropdown-arrow"></i>
                                </button>
                                <div class="dropdown-menu box-shadow" aria-labelledby="avail-fields-btn" id="available-fields">
                    
                                    <div class="select-unselect-header" id="select-unselect-header">
                                        Select/Unselect All
                                        <img class="select-unselect-checkbox" src="assets/available-field-checkbox.svg">
                                    </div>
                                    <div class="fields"></div>
                                </div>
                            </div>
                            <div class="table-view-toggle-container btn btn-grey">
                                <label class="label-table-view">Table view</label>
                                <label class="switch">
                                    <input type="checkbox" id="toggle-switch">
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            <div>
                                <button class="btn settings-btn panEdit-btn" title="Open dashboard settings" id="db-settings-btn"></button>
                            </div>
                        </div>
                    </div>
                    <div class="panelDisplay">
                        <div id="panEdit-panel" class="panEdit-panel"></div>
                        <div id="panelLogResultsGrid" class="panelLogResultsGrid ag-theme-mycustomtheme"></div>
                        <div id="empty-response"></div>
                        <div class="big-number-display-container"></div>
                        <div id="corner-popup">
                            <div class="corner-container">
                                <div class="corner-text"></div>
                            </div>
                        </div>
                        <div class="panel-info-corner"><i class="fa fa-info" aria-hidden="true" id="panel-desc-info"></i></div>
                    </div>
                    <div class="section">
                        <div class="subsection-heading">
                            <div class="circle">1</div>
                            <div>Select your visualization</div>
                        </div>
                        <div class="section-content">
                            <ul class="editPanelMenu-chart">
                                <div class="chart-options" id="chart-type-options" data-index="0">
                                    <img src="./assets/line-chart.svg" alt="line chart icon" class="chart-display">
                                    <li>Line Chart</li>
                                </div>
                                <div class="chart-options" id="chart-type-options" data-index="1">
                                    <img src="./assets/bar-chart.svg" alt="bar chart icon" class="chart-display">
                                    <li>Bar Chart</li>
                                </div>
                                <div class="chart-options" id="chart-type-options" data-index="2">
                                    <img src="./assets/pie-chart.svg" alt="pie chart icon" class="chart-display">
                                    <li>Pie Chart</li>
                                </div>
                                <div class="chart-options" id="chart-type-options" data-index="3">
                                    <img src="./assets/data-table.svg" alt="data table icon" class="chart-display">
                                    <li>Data Table</li>
                                </div>
                                <div class="chart-options" id="chart-type-options" data-index="4">
                                    <img src="./assets/number-chart.svg" alt="number chart icon" class="chart-display">
                                    <li>Number</li>
                                </div>
                                <div class="chart-options" id="chart-type-options" data-index="5">
                                    <img src="./assets/log-lines.svg" alt="log lines icon" class="chart-display">
                                    <li>Log Lines</li>
                                </div>
                            </ul>
                        </div>
                    </div>
                    <div class="section">
                        <div class="subsection-heading">
                            <div class="circle">2</div>
                            <div>Graph your data</div>
                        </div>
                        <div class="section-content">
                            <div class="dropDown-container mb-2 position-relative">
                                <div class="dropDownTitle dropDown-dataSource active">
                                    <span>Data Source</span>
                                    <div class="caret"></div>
                                </div>
                                <ul class="editPanelMenu editPanelMenu-dataSource">
                                    <div class="editPanelMenu-options logs-options" id="datasource-options" data-index="0">
                                        <li data-value="Metrics">Metrics</li>
                                    </div>
                                    <div class="editPanelMenu-options logs-options" id="datasource-options" data-index="1">
                                        <li data-value="Logs">Logs</li>
                                    </div>
                                </ul>
                            </div>
                            <div class="queryInputs">
                                <div class="queryInput-container">
                                    <div class="queryInput-InnerContainer">
                                        <div id = "custom-code-tab" class="custom-code-tab">
                                            <div class="query-builder-container">
                                                <div class="d-flex justify-content-end">
                                                    <ul class="tab-list">
                                                        <li class="tab-li tab-li-query" id = "tab-title1"><a href="#tabs-1" class="custom-query-builder">Builder</a></li>
                                                        <li class="tab-li tab-li-code" id = "tab-title2"><a href="#tabs-2"  class="custom-query-builder">Code</a></li>
                                                    </ul>
                                                    <button class="btn settings-btn" id="logs-settings">
                                                    </button>
                                                    <div class="" id="setting-container">
                                                        <div style="margin-bottom: 3px;">Query Language:</div>
                                                        <div class="dropdown">
                                                            <button class="btn dropdown-toggle" type="button" id="query-language-btn" data-toggle="dropdown"
                                                                aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" >
                                                                <span>Splunk QL</span>
                                                                <i class="dropdown-arrow"></i>
                                                            </button>
                                                            <div class="dropdown-menu box-shadow" aria-labelledby="index-btn" id="query-language-options">
                                                                <li id="option-3" class="query-language-option active">Splunk QL</li>
                                                            </div>
                                                        </div>
                                                        <div style="margin-bottom: 3px;">Query Mode:</div>
                                                        <div class="dropdown">
                                                            <button class="btn dropdown-toggle" type="button" id="query-mode-btn" data-toggle="dropdown"
                                                                aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown">
                                                                <span>Builder</span>
                                                                <i class="dropdown-arrow"></i>
                                                            </button>
                                                            <div class="dropdown-menu box-shadow" aria-labelledby="index-btn" id="query-mode-options">
                                                                <li id="mode-option-1" class="query-mode-option">Builder</li>
                                                                <li id="mode-option-2" class="query-mode-option">Code</li>
                                                            </div>
                                                        </div>
                                                        
                                                    </div>
                                                </div>
                                                <div class="d-flex">
                                                    <div id = "tabs-1">
                                                        <div class="filter-info">
                                                            <div id="filter-container">
                                                                <div class="filter-con">
                                                                    <div class="filter-box" id="filter-box-1">
                                                                        <span class = "aggregations" id="search-filter-text">Search filter</span>
                                                                        <ul id="tags" class="tags-list"></ul>
                                                                        <button id="add-con" class="add-con btn">+</button>
                                                                    </div>
                                                                    <div class="add-filter" id="add-filter">
                                                                        <input id="column-first" class="column-first" type="hidden" onkeyup="checkContent(this)"/>
                                                                        <input id="symbol" class="symbol" type="hidden" onkeyup="checkContent(this)"/>
                                                                        <input id="value-first" class="value-first" type="hidden" onkeyup="checkContent(this)"/>
                                                                        <button id="completed" class="completed btn"></button>
                                                                        <button id="cancel-enter" class="cancel-enter btn">×</button>
                                                                    </div>
                                                                </div>
                                                                <div class="builder-div">stats</div>
                                                                <div class="filter-con second-enter">
                                                                    <div class="filter-box" id="filter-box-2">
                                                                        <span class = "aggregations" id="aggregate-attribute-text">Aggregation attribute</span>
                                                                        <ul id="tags-second" class="tags-list"></ul>
                                                                        <button id="add-con-second" class="add-con btn">+</button>
                                                                    </div>
                                                                    <div class="add-filter add-filters" id="add-filter-second">
                                                                        <input id="column-second" class="column-first" type="hidden" onkeyup="checkSecondContent(this)"/>
                                                                        <input id="value-second" class="value-first" type="hidden" onkeyup="checkSecondContent(this)"/>
                                                                        <button id="completed-second" class="completed btn" ></button>
                                                                        <button id="cancel-enter-second" class="cancel-enter btn">×</button>
                                                                    </div>
                                                                </div>
                                                                <div class="builder-div">group by</div>
                                                                <div class="filter-con third-enter">
                                                                    <div class="filter-box third-box"  id="filter-box-3">
                                                                        <span class = "aggregations" id="aggregations">Group by column name</span>
                                                                        <ul id="tags-third" class="tags-list"></ul>
                                                                        <button id="add-con-third" class="add-con btn">+</button>
                                                                    </div>
                                                                    <div class="add-filter add-third" id="add-filter-third">
                                                                        <input id="column-third" class="column-third" type="hidden" />
                                                                        <button id="cancel-enter-third" class="cancel-enter btn">×</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <button class="search-img" id="query-builder-btn"></button>
                                                        </div>
                                                    </div>
                                                    <div id = "tabs-2">
                                                        <div class="filter-container">
                                                            <div class="position-relative search-bar-container">
                                                                <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip" id="info-icon-sql" style="display: none;"
                                                                    title=' SELECT MAX(latency), COUNT(city) FROM `*` GROUP BY country, gender LIMIT 10
                                                                                                        SELECT * FROM `ind-0`
                                                                                                        SELECT * FROM `ind-0` ORDER BY latency ASC
                                                                                                        SELECT first_name AS firstnames, country AS origincountry FROM `ind-0`
                                                                                                        SELECT MAX(latency), COUNT(city) FROM `*` WHERE gender = male GROUP BY country LIMIT 10
                                                                                                        SELECT * FROM `*` WHERE app_name = Wheataccount AND gender = male LIMIT 10'>
                                                
                                                                </i>
                                                                <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip" id="info-icon-logQL" style="display: none;"
                                                                    title=' {app="mysql",name="mysql-backup"}
                                                                                                        {job="mysql"} |= "error"
                                                                                                        {name="cassandra"} |~ error=\w+
                                                                                                        {job="mysql"} |= "error" != "timeout"
                                                                                                        {job="mysql"} |= "error" | json | line_format "&lbrace;{.err}&rbrace;"
                                                                                                        '>
                                                                </i>
                                                                <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip" id="info-icon-spl" style="display: block;"
                                                                    title=' app_version!=2.14.2 AND weekday=T*day
                                                                                                        city=Boston | stats count, avg(latency) BY weekday, http_method
                                                                                                        city=Boston | stats avg(latency) AS Avg BY weekday | eval Millis=Avg / 1000, Millis=Millis . " ms"
                                                                                                        city=Boston | ```This is a comment``` fields http*
                                                                                                        http_method=POST | regex city="^[a-zA-Z]+\s[a-zA-Z]+$" | fields city
                                                                                                        city=Boston | stats count AS Count BY weekday | where Count / 2 > 6 OR weekday = "Saturday"
                                                                                                        '>
                                                                </i>
                                                                <textarea class="form-control expandable-textarea" id="filter-input"
                                                                    placeholder="Enter your SPL query here, or click the 'i' icon for examples" type="text"></textarea>
                                                                <span class="clear-icon" id="clearInput"></span>
                                                            </div>
                                                            <div class="text-end">
                                                                <button class="btn run-filter-btn" id="run-filter-btn"></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div>
                                        <button type="submit" id="run-query-btn" class="btn-runQuery">Run Query</button>
                                    </div> -->
                                </div>
                                <div id="metrics-query-language">
                                    <div id="metrics-explorer">
                                        <div id="metrics-queries"></div>
                                        <div id="metrics-formula"></div>
                                         <div class="mt-3 d-flex ">
                                             <button id="add-query" class="btn btn-grey"><span class="plus-icon">+</span> Add Query</button>
                                             <button id="add-formula" class="btn btn-grey"><span class="plus-icon">+</span> Add Formula</button>
                                         </div>
                                     </div>
                                     <div id="visualization-options" class="mb-3 mt-3">
                                        <div>Display: <input id="display-input" type="text" value="Line chart"></div>
                                        <div>Color: <input id="color-input" type="text" value="Classic"></div>
                                        <div id="line-style-div">Style: <input id="line-style-input" type="text" value="Solid"></div>
                                        <div id="stroke-div">Stroke: <input id="stroke-input" type="text" value="Normal"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="section-content graph-customization">
                            <div>
                                <div class="dropDownTitle dropDown-unit active">
                                    <span>Unit</span>
                                    <div class="caret"></div>
                                </div>
                                <div id="nestedDropDownContainer">
                                    <ul class="editPanelMenu editPanelMenu-unit">
                                        <div class="editPanelMenu-unit-options" id="nestedMiscDropDown" data-index="0">
                                            <li class="dropDown-misc-options">
                                                <span>Misc</span>
                                            </li>
                                            <div class="horizontalCaret"></div>
                                        </div>
                                        <div class="editPanelMenu-unit-options" id="nestedDataDropDown" data-index="1">
                                            <li class="dropDown-data-options">
                                                <span>Data</span>
                                            </li>
                                            <div class="horizontalCaret"></div>
                                        </div>
                                        <div class="editPanelMenu-unit-options" id="nestedThroughputDropDown" data-index="2">
                                            <li class="dropDown-throughput-options">
                                                <span>Throughput</span>
                                            </li>
                                            <div class="horizontalCaret"></div>
                                        </div>
                                        <div class="editPanelMenu-unit-options" id="nestedTimeDropDown" data-index="3">
                                            <li class="dropDown-time-options">
                                                <span>Time</span>
                                            </li>
                                            <div class="horizontalCaret"></div>
                                        </div>
                                        <div class="editPanelMenu-unit-options" id="nestedDataRateDropDown" data-index="4">
                                            <li class="dropDown-data-rate-options">
                                                <span>Data Rate</span>
                                            </li>
                                            <div class="horizontalCaret"></div>
                                        </div>
                                    </ul>
                                    <ul class="editPanelMenu editPanelMenu-inner-options" id="miscOptionsDropDown">
                                        <div class="misc-options inner-options" data-index="0">
                                            <li>none</li>
                                        </div>
                                        <div class="misc-options inner-options" data-index="1">
                                            <li>percent(0-100)</li>
                                        </div>
                                    </ul>
                                    <ul class="editPanelMenu editPanelMenu-inner-options" id="dataOptionsDropDown">
                                        <div class="data-options inner-options" data-index="0">
                                            <li>Bytes</li>
                                        </div>
                                        <div class="data-options inner-options" data-index="1">
                                            <li>kB</li>
                                        </div>
                                        <div class="data-options inner-options" data-index="2">
                                            <li>MB</li>
                                        </div>
                                        <div class="data-options inner-options" data-index="3">
                                            <li>GB</li>
                                        </div>
                                        <div class="data-options inner-options" data-index="4">
                                            <li>TB</li>
                                        </div>
                                        <div class="data-options inner-options" data-index="5">
                                            <li>PB</li>
                                        </div>
                                        <div class="data-options inner-options" data-index="6">
                                            <li>EB</li>
                                        </div>
                                        <div class="data-options inner-options" data-index="7">
                                            <li>ZB</li>
                                        </div>
                                        <div class="data-options inner-options" data-index="8">
                                            <li>YB</li>
                                        </div>
                                    </ul>
                                    <ul class="editPanelMenu editPanelMenu-inner-options" id="throughputOptionsDropDown">
                                        <div class="throughput-options inner-options" data-index="0">
                                            <li>counts/sec</li>
                                        </div>
                                        <div class="throughput-options inner-options" data-index="1">
                                            <li>writes/sec</li>
                                        </div>
                                        <div class="throughput-options inner-options" data-index="2">
                                            <li>reads/sec</li>
                                        </div>
                                        <div class="throughput-options inner-options" data-index="3">
                                            <li>requests/sec</li>
                                        </div>
                                        <div class="throughput-options inner-options" data-index="4">
                                            <li>ops/sec</li>
                                        </div>
                                    </ul>
                                    <ul class="editPanelMenu editPanelMenu-inner-options" id="timeOptionsDropDown">
                                        <div class="time-options inner-options" data-index="0">
                                            <li>hertz(1/s)</li>
                                        </div>
                                        <div class="time-options inner-options" data-index="1">
                                            <li>nanoseconds(ns)</li>
                                        </div>
                                        <div class="time-options inner-options" data-index="2">
                                            <li>microsecond(µs)</li>
                                        </div>
                                        <div class="time-options inner-options" data-index="3">
                                            <li>milliseconds(ms)</li>
                                        </div>
                                        <div class="time-options inner-options" data-index="4">
                                            <li>seconds(s)</li>
                                        </div>
                                        <div class="time-options inner-options" data-index="5">
                                            <li>minutes(m)</li>
                                        </div>
                                        <div class="time-options inner-options" data-index="6">
                                            <li>hours(h)</li>
                                        </div>
                                        <div class="time-options inner-options" data-index="7">
                                            <li>days(d)</li>
                                        </div>
                                    </ul>
                                    <ul class="editPanelMenu editPanelMenu-inner-options" id="dataRateOptionsDropDown">
                                        <div class="data-rate-options inner-options" data-index="0">
                                            <li>packets/sec</li>
                                        </div>
                                        <div class="data-rate-options inner-options" data-index="1">
                                            <li>bytes/sec</li>
                                        </div>
                                        <div class="data-rate-options inner-options" data-index="2">
                                            <li>bits/sec</li>
                                        </div>
                                        <div class="data-rate-options inner-options" data-index="3">
                                            <li>kilobytes/sec</li>
                                        </div>
                                        <div class="data-rate-options inner-options" data-index="4">
                                            <li>kilobits/sec</li>
                                        </div>
                                        <div class="data-rate-options inner-options" data-index="5">
                                            <li>megabytes/sec</li>
                                        </div>
                                        <div class="data-rate-options inner-options" data-index="6">
                                            <li>megabits/sec</li>
                                        </div>
                                        <div class="data-rate-options inner-options" data-index="7">
                                            <li>gigabytes/sec</li>
                                        </div>
                                        <div class="data-rate-options inner-options" data-index="8">
                                            <li>gigabits/sec</li>
                                        </div>
                                        <div class="data-rate-options inner-options" data-index="9">
                                            <li>terabytes/sec</li>
                                        </div>
                                        <div class="data-rate-options inner-options" data-index="10">
                                            <li>terabits/sec</li>
                                        </div>
                                        <div class="data-rate-options inner-options" data-index="11">
                                            <li>petabytes/sec</li>
                                        </div>
                                        <div class="data-rate-options inner-options" data-index="12">
                                            <li>petabits/sec</li>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                            <div>
                                <div class="dropDownTitle dropDown-logLinesView active">
                                    <span>Single line display view</span>
                                    <div class="caret"></div>
                                </div>
                                <ul class="editPanelMenu editPanelMenu-logLinesView" id="editPanelMenu-logLinesView">
                                    <div class="editPanelMenu-options" id="logLinesView-options" data-index="0">
                                        <li>Single line display view</li>
                                    </div>
                                    <div class="editPanelMenu-options" id="logLinesView-options" data-index="1">
                                        <li>Multi line display view</li>
                                    </div>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <div class="subsection-heading">
                            <div class="circle">3</div>
                            <div>Give your graph a title <span style="
                                font-size: 14px;
                                font-weight: normal;
                            ">(or leave blank for suggested title)</span> </div>
                        </div>
                        <div class="section-content">
                            <div class="panEdit-nameChange">
                                <input type="text" id="panEdit-nameChangeInput">
                            </div>
                            <div class="panEdit-descrChange">
                                <textarea name="" id="panEdit-descrChangeInput" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="viewPanel-container">
            </div>
        </div>
        <div class="button-section">
            <div class="panEdit-navBtns">
                <button class="panEdit-btn panEdit-discard btn-grey" id="discard-btn" title="Undo all changes">Cancel</button>
                <button class="panEdit-btn panEdit-save" id="save-btn"
                    title="Apply changes and save dashboard">Save</button>
            </div>
        </div>
    </div>
    <div class="dbSet-container">
        <div class="dbSet-navBar">
            <div class="d-flex align-items-center">
                <span class="dbSet-goToDB" title="Go back">&#8592</span>
                <span class="dbSet-name">DBName</span>
            </div>
            <div>
                <button class="panEdit-btn" id="dbSet-discard" title="Discard Changes">Discard</button>
                <button class="panEdit-btn" id="dbSet-save" title="Save Changes">Save</button>
            </div>
        </div>
        <div class="dbSet-body">
            <div class="dbSet-left">
                <div class="dbSet-nav">
                    <span class="dbSet-heading">Settings</span>
                </div>
                <div class="dbSet-options">
                    <span class="dbSet-general">General</span>
                    <span class="dbSet-jsonModel">JSON Model</span>
                </div>
            </div>
            <div class="dbSet-right">
                <div class="dbSet-generalHTML">
                    <div class="dbSet-inputContainer" id="dbSet-nameContainer">
                        <label for="dbSet-dbName">Name</label>
                        <input type="text" class="dbSet-dbName" placeholder="Name">
                    </div>
                    <!-- PopupOverlay elements -->
                    <div class="popupOverlay"></div>
                    <div class="popupContent" id="error-message-popup">
                        <h3 class="header">Error</h3>
                        <p id="error-message"></p>
                        <div id="buttons-popupContent">
                            <button type="button" id="error-ok-btn">OK</button>
                        </div>
                    </div>

                    <div class="dbSet-inputContainer" id="dbSet-descrContainer">
                        <label for="dbSet-dbDescr">Description</label>
                        <textarea class="dbSet-dbDescr" id="dbSet-dbDescr" placeholder="Description"></textarea>
                    </div>

                    <div class="dbSet-inputContainer" id="dbSet-descrContainer">
                        <label for="dbSet-dbFolder">Folder</label>
                        <input class="dbSet-dbFolder" id="dbSet-dbFolder" readonly></input>
                    </div>
                    <div class="dbSet-saveBtnContainer">
                    </div>
                </div>
                <div class="dbSet-jsonModelHTML">
                    <span class="dbSet-jsonModelTitle">
                        JSON Model
                    </span>
                    <button class="panEdit-btn" id="dbSet-edit-json" title="Edit JSON">Edit JSON</button>
                    <button class="panEdit-btn" id="dbSet-save-json" title="Save Changes">Save JSON</button>
                    <div class="dbSet-textareaContainer">
                        <textarea class="dbSet-jsonModelData" placeholder="{'field 1':'value 1',\n 'field 2': 'value 2'}" disabled></textarea>
                        <div class="copy" title="Copy"></div>
                    </div>
                </div>                                      
            </div>
        </div>
    </div>
    <div class="mypopupOverlay" style="z-index: 3;">
    </div>
        <div class="mypopupContent" id="error-popup">
            <h3 class="header mb-2"><span><i class="fas fa-exclamation-triangle"></i></span> Error loading data</h3>
            <p class="mt-3">The search settings were changed. To see the updated results, please press the <span style="color: #6449D6; font-weight: 600;">magnifying glass</span> icon.<p>
            <div class="d-flex align-items-center justify-content-end mt-3">
                <button type="button" id="okay-button" class="btn">OK</button>
            </div>
        </div>

    <script src="./js/common.js?cb={{ AppVersion }}"></script>
    <script src="./js/navbar.js?cb={{ AppVersion }}"></script>
    <script src="./js/event-handlers.js?cb={{ AppVersion }}"></script>
    <script src="./js/available-fields-dashboard.js?cb={{ AppVersion }}"></script>
    <script src="./js/log-results-grid.js?cb={{ AppVersion }}"></script>
    <script src="./js/ag-grid-seg-stats.js?cb={{ AppVersion }}"></script>
    <script src="./js/date-picker.js?cb={{ AppVersion }}"></script>
    <script src="./js/index.js?cb={{ AppVersion }}"></script>
    <script src="./js/search.js?cb={{ AppVersion }}"></script>
    <script src="./js/dashboard-charts.js?cb={{ AppVersion }}"></script>
    <script src="./js/dashboard.js?cb={{ AppVersion }}"></script>
    <script src="./js/edit-panel-screen.js?cb={{ AppVersion }}"></script>
    <script src="./js/dashboard-logs-results-grid.js?cb={{ AppVersion }}"></script>
    <script src="./component/upper-navbar/upper-navbar.js?cb={{ AppVersion }}"></script>
    <script src="./component/dashboard/breadcrum.js?cb={{ AppVersion }}"></script>
    <script src="./js/metrics-explorer.js?cb={{ AppVersion }}"></script>
    <script src="./js/query-builder.js?cb={{ AppVersion }}"></script>

    {{ .RunCheck2 | safeHTML }}
    {{ .RunCheck3 | safeHTML }}
</body>

</html>